Styling the Groups Grid

The grid and its cards are styled entirely from SASS variables, so in most cases you do not need to override a stylesheet at all. Copy the variable file that defines the value you want to change into your project — as described in Using SASS To Customize WebWorks Reverb 2.0 — and edit the value there. The default values are listed below.

For anything the variables do not cover, add your own rules to custom.scss, as described in Adding Your Own CSS with custom.scss. The grid's own structural rules live in skin.scss, and its responsive rules live in webworks.scss, because the grid renders inside the page frame.

_colors.scss

Variable	Default	Controls
`$splash_groups_card_background_color`	`#ffffff`	Card background.
`$splash_groups_card_border_color`	`rgba(0, 0, 0, 0.14)`	Card border.
`$splash_groups_card_border_color_hover`	`rgba(0, 0, 0, 0.22)`	Card border when the card is hovered or holds focus.
`$splash_groups_card_accent_color`	`$link_default_color`	Keyline along the top edge of an engaged card, and the focus ring on card links.
`$splash_groups_card_title_text_color`	`#1a1a1a`	Card title.
`$splash_groups_card_title_text_color_hover`	`$link_default_color`	Card title when hovered.
`$splash_groups_card_member_text_color`	`#4a4a4a`	Member links listed inside a card.
`$splash_groups_card_member_text_color_hover`	`$link_default_color`	Member link when hovered.

_sizes.scss

Variable	Default	Controls
`$splash_groups_padding`	`28px 20px 48px`	Padding around the grid.
`$splash_groups_padding_narrow`	`16px 12px 32px`	Padding around the grid in the narrow (mobile) layout.
`$splash_groups_grid_gap`	`20px`	Space between cards.
`$splash_groups_grid_gap_narrow`	`12px`	Space between cards in the narrow (mobile) layout.
`$splash_groups_card_min_width`	`240px`	Minimum card width. The grid fits as many columns of at least this width as the page allows.
`$splash_groups_card_padding`	`18px 20px 20px`	Padding inside a card.
`$splash_groups_card_border_radius`	`10px`	Corner radius of a card.
`$splash_groups_card_accent_height`	`3px`	Thickness of the top-edge keyline.
`$splash_groups_member_link_padding`	`4px 0`	Padding on each member link.

_borders.scss

Variable	Default	Controls
`$splash_groups_card_border_style`	`solid`	Card border style.
`$splash_groups_card_border_width`	`1px`	Card border width.

_fonts.scss

Variable	Default	Controls
`$splash_groups_card_title_font`	`$font_family_main`	Card title font family.
`$splash_groups_card_title_font_size`	`$font_size_medium`	Card title font size.
`$splash_groups_card_title_font_weight`	`bold`	Card title font weight.
`$splash_groups_card_member_font`	`$font_family_main`	Member link font family.
`$splash_groups_card_member_font_size`	`$font_size_small`	Member link font size.

The grid's own markup carries these class names, which you can target from custom.scss when a variable is not enough:

Class	Applies to
`ww_skin_splash_groups`	The container the grid is rendered into. It also carries the current layout class (`layout_wide`, `layout_narrow`, or `layout_narrow layout_tall`).
`ww_skin_splash_groups_grid`	The list that lays the cards out in columns.
`ww_skin_splash_group_card`	One card.
`ww_skin_splash_group_card_title`	The card's title, which is a link when the card has a page of its own.
`ww_skin_splash_group_card_members`	The list of member links inside a card.

Last modified date: 08/17/2026